body {
    font-family: 微软雅黑, sans-serif, Verdana, Arial, Helvetica;
    font-size: 12px;
    background: #FFF;
}

.hidden {
    display: none;
}

#main {
    background-color: #ffffff;
    width: 1000px;
    height: 700px;
}

#table_pane {
	float: left;
	background-color: #ffffff;
	width: 820px;
	height: 520px;
}

#other_player_pane {
	background-color: #333333;
	height: 195px;
}
	
#right_side {
	float: left;
	background-color: #cccccc;
	width: 180px;
	height: 520px;
	overflow: auto;
}
#op_pane {
	float: left;
    background-color: #000000;
    height: 180px;
    width: 1000px;
}

#equip {
    float: left;
    background-color: #000000;
    width: 170px;
    height: 170px;
    margin: 5px;
}

#card {
    float: left;
    background-color: #000000;
    width: 640px;
    height: 174px;
    margin: 1px 0 5px 0;
}

#judge {
	float: left;
    background-color: #ffffff;
    width: 500px;
    height: 28px;
}

#role {
    float: left;
    color: #ffffff;
    width: 40px;
    height: 28px;
}

.role-unknown {
    background-color: black;
}

.role-zg {
    background-color: red;
}

.role-zc {
    background-color: orange;
}

.role-fz {
    background-color: green;
}

.role-nj {
    background-color: blue;
}


#status {
    float: left;
    background-color: #000000;
    color: #ffffff;
    width: 40px;
    height: 28px;
}

#hand {
	float: left;
    background-color: #ffffff;
    width: 638px;
    height: 140px;
    margin: 4px 1px 0 1px;
}

#figure {
    float: left;
    background-color: #000000;
    width: 168px;
    height: 170px;
    margin: 5px;
    padding: 1px;
}

#other_player_pane .other-player {
	float: left;
	width: 115px;
	height: 195px;
	margin: 1px;
}

#other_player_pane .other-player .selected .image,
#other_player_pane .other-player .selected .name {
    background-color: #ccc;
}

#other_player_pane .other-player .name {
	float: left;
	background-color: #ffffff;
    color: #000000;
	width:65px;
	height: 20px;
}



#other_player_pane .other-player .image {
	float: left;
	background-color: #ffffff;
	width:115px;
	height: 91px;
	margin: 1px 0 0 0;
}

#other_player_pane .other-player .equip {
	float: left;
	background-color: #ffffff;
	width:115px;
	height: 80px;
	margin: 1px 0 0 0;
}

#other_player_pane .other-player .equip .equip-item {
	background-color: #ffffff;
	width:115px;
	height: 15px;
	margin: 0 0 1px 0;
}

#other_player_pane .other-player .equip .equip-item:hover {
	background-color: #cccccc;
}

#other_player_pane .other-player .role {
    float: left;
    background-color: #000000;
    color: #ffffff;
    width: 24px;
    height: 20px;
    margin: 0 0 0 1px;
}

#other_player_pane .other-player .status {
    float: left;
    color: #ffffff;
    width: 24px;
    height: 20px;
    margin: 0 0 0 1px;
}

#hand .card {
    float: left;
    background-color: #222222;
    color: #eeeeee;
    width: 90px;
    height: 130px;
    margin: 5px 0 5px 1px;
    transition-property: margin, color, background-color;
    transition-duration: 0.3s;
    -moz-transition-property: margin, color, background-color;
    -moz-transition-duration: 0.3s;
    -webkit-transition-property: margin, color, background-color;
    -webkit-transition-duration: 0.3s;
    -o-transition-property: margin, color, background-color;
    -o-transition-duration: width 0.3s;
}

#hand .card:hover {
    background-color: #000000;
    color: #ffffff;
    margin: -10px 0 20px 1px;
}

#hand .selected-card {
    float: left;
    background-color: #000000;
    color: #FFFFFF;
    width: 90px;
    height: 130px;
    margin: -20px 0 20px 1px;
}

#equip .equip-item {
    height: 40px;
    background-color: #ffffff;
    margin: 1px 1px 0 1px;
}

#equip .hp {
    height: 40px;
    background-color: #ffffff;
    margin: 1px 1px 0 1px;
}

#equip .equip-item:hover {
    background-color: #cccccc;
}

#figure .figure-top {
	height: 108px;
	background-color: #ffffff;
	margin: 0 1px 0 0;
}

#figure .action-pane {
	/*color: #ffffff;*/
	background-color: #cccccc;
    float: left;
    width: 44px;
    height: 108px;
    margin: 0 0 0 1px;
}
#figure .image {
	float: left;
	width: 120px;
    background-color: #cccccc;
    color: #ffffff;
    height: 108px;
    margin: 0 0 0 1px;
}

#figure .skill-row {
    height: 30px;
    margin: 1px 0 0 0;
}

#figure .skill-row .skill {
    float: left;
    background-color: #ffffff;
    width: 83px;
    height: 30px;
    margin: 0 1px 0 0;
}

#figure .skill-row .skill:hover {
    background-color: #cccccc;
}
